<template>
    <div class="wh-100" style="background-color: white">
        <div style="height: 60px" class="d-flex-align-center bor-base-b pl-24 fw-6 fs-18">用人单位</div>
        <div class="h-80 bor-base-b">
            <div class="h-10 d-flex bor-base-b d-flex-align-center">
                <div class="w-15 py-12 pl-24 mr-auto">
                    <!--          <el-checkbox v-model="allChecked" @change="isAllChecked"></el-checkbox>-->
                    <Button style="background-color: white" class="ml-12" @click="download">导出数据</Button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                </div>
                <div class="w-75 pl-100 d-flex-align-center">
                        <Select class="w-10" v-model="pageParams.reviewStatus" placeholder="单位类型">
                            <Option value="全部" >全部状态</Option>
                            <Option value="1" >待审核</Option>
                            <Option value="2" >审核通过</Option>
                            <Option value="3" >审核不通过</Option>
                        </Select>
                        <Select class="w-25 ml-8"  v-model="pageParams.unitIndustry" placeholder="行业">
                            <Option value="全部" >全部行业</Option>
                            <Option v-for="item in industrySelection" :key="item.value" :value="item.title">{{item.title}}</Option>
                        </Select>

                        <Select class="w-20 ml-8" v-model="pageParams.unitType" placeholder="单位类型">
                            <Option value="全部" >单位类型</Option>
                            <Option v-for="item in typeSelection" :key="item.value"  :value="item.title">{{item.title}}</Option>
                        </Select>
                        <Select class="w-15 ml-8" v-model="pageParams.scale" placeholder="请选择规模">
                            <Option value="全部" >规模</Option>
                            <Option v-for="item in scaleSelection" :key="item.value" :value="item.title">{{item.title}}</Option>
                        </Select>
                    <!--          <div class="ml-28">-->
                    <!--            <el-select  v-model="pageParams.unitType" placeholder="职位类别">-->
                    <!--              <el-option value="全部" label="职位类别"></el-option>-->
                    <!--              <el-option-->
                    <!--                  v-for="item in jobCategorySelection"-->
                    <!--                  :key="item.value"-->
                    <!--                  :label="item.title"-->
                    <!--                  :value="item.title">-->
                    <!--              </el-option>-->
                    <!--            </el-select>-->
                    <!--          </div>-->
                    <div style="margin-left: 5px"  class="w-30  d-flex">
                        <Input class="w-70" placeholder="用人单位名称/社会信用代码"  @on-keyup="pageParams.search=pageParams.search.replace(/\s/g,'')" v-model="pageParams.search"></Input>
                        <Button style="background-color: #1890ff; color: white" @click="toSearch">搜索</Button>
                    </div>
                </div>
            </div>
            <div class="h-90">
                <Alert v-show="openTip" show-icon>
                    已选择
                    <span >{{ selectList.length }}</span>
                    项
                    <a @click="toggleSelection">清空</a>
                </Alert>
                <el-table
                    ref="multipleTable"
                    class="el-overflow-auto-hidden"
                    :height="heightNmber"
                    width="100%"
                    :header-cell-style="{ background: $backColor,color: '#333333' }"
                    @selection-change="handleSlectionChange"
                    empty-text="暂无数据"
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%"
                >
                    <el-table-column type="selection" width="50"></el-table-column>
                    <!--          <el-table-column  v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">-->
                    <!--          </el-table-column>-->
                    <el-table-column prop="schoolName" label="站点名称" align="center"></el-table-column>
                    <el-table-column prop="name" label="单位名称" align="center"></el-table-column>
                    <el-table-column prop="unitIndustry" label="所属行业" align="center"></el-table-column>
                    <el-table-column prop="unitType" label="单位类型" align="center"></el-table-column>
                    <el-table-column prop="attnName" label="经办人" align="center" width="80px"></el-table-column>
                    <el-table-column prop="attnIdCard" label="单位证件" align="center" width="140px">
                        <template #default="scope">
                            <div class="d-flex">
                                <el-image style="width: 70px; height: 70px" :src="scope.row.attnIdCard" :fit="fit" :preview-src-list="[scope.row.attnIdCard, scope.row.supportingMaterial]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <el-image style="width: 70px; height: 70px" :src="scope.row.supportingMaterial" :fit="fit" :preview-src-list="[scope.row.attnIdCard, scope.row.supportingMaterial]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center" fixed="right">
                        <template #default="scope">
                            <el-link v-if="scope.row.reviewStatus === 0" type="primary" :underline="false">未提交审核</el-link>
                            <el-link v-if="scope.row.reviewStatus === 1" type="primary" :underline="false">待审核</el-link>
                            <el-link v-if="scope.row.reviewStatus === 2" type="success" :underline="false">审核通过</el-link>
                            <el-link v-if="scope.row.reviewStatus === 3" type="danger" :underline="false">审核未通过</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="操作" fixed="right" align="center">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="viewDetails(scope.row.id, scope.row.schoolId)">查看</el-button>
                            <el-button type="text" size="small" @click="audit(scope.row.id, scope.row.schoolId)">审核</el-button>
                            <el-button type="text" size="small" @click="approvedMemo(scope.row.id)">审核记录</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="是否拉黑" fixed="right" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.isBlack" active-color="#1d8ce0" inactive-color="#e0e0e0" width="50" @change="isBlocking(scope.row.id, scope.row.isBlack)"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--分页-->
        <div class="h-10 d-flex-center fs-16">
            <Page show-total show-sizer :total="pageTotal" :current="pageParams.pageNumber" :page-size="pageParams.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator />
        </div>
        <el-dialog title="企业参与的申请记录" :visible.sync="dialogTableVisible">
            <el-table class="el-overflow-auto-hidden" :data="recordList" :header-cell-style="{ background: '#f0f0f0', color: '#606266' }" empty-text="暂无数据">
                <el-table-column property="name" label="学校名称" width="150"></el-table-column>
                <el-table-column property="activityType" label="审核类型" width="200"></el-table-column>
                <el-table-column property="reviewStatus" label="审核状态">
                    <!--          <template slot-scope="scope">-->
                    <!--            <span v-if="scope.row.reviewStatus === '0'">未提交审核</span>-->
                    <!--            <span v-if="scope.row.reviewStatus === '1'">待审核</span>-->
                    <!--            <span v-if="scope.row.reviewStatus === '2'">审核通过</span>-->
                    <!--            <span v-if="scope.row.reviewStatus === '3'">审核未通过</span>-->
                    <!--          </template>-->
                </el-table-column>
                <el-table-column property="auditFail" label="审核原因" align="center">
                    <template slot-scope="scope">{{ scope.row.auditFail ? scope.row.auditFail : '--' }}</template>
                </el-table-column>
                <el-table-column property="auditTime" label="审核时间"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
            title="黑名单操作"
            :visible.sync="blacklistOperationVisible"
            :before-close="unmask"
        >
            <el-form ref="blacklistRef" :model="blacklistForm" label-width="100px">
                <el-form-item label="操作类型">
                    <el-radio-group v-model="blacklistForm.isBlocking">
                        <el-radio :label="true">拉黑</el-radio>
                        <el-radio :label="false">取消拉黑</el-radio>
                    </el-radio-group>
                    <!--          <el-radio-group v-model="blacklistForm.isBlocking">-->
                    <!--            <el-radio :value=true >拉黑</el-radio>-->
                    <!--            <el-radio :value=false >取消拉黑</el-radio>-->
                    <!--          </el-radio-group>-->
                </el-form-item>
                <el-form-item label="原因">
                    <el-input type="textarea" v-model="blacklistForm.reportReason" placeholder="请填写拉黑或取消拉黑的原因，拉黑后企业将无法登录系统，解除拉黑后企业登录恢复"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="block">确定</el-button>
                    <el-button @click="unmask">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { flatTypeAPI, getIndustryAPI, getNatureAPI, getnetPositionAPI, getPositionAPI, unitSizeAPI } from '../../../api/bys/index';
import { employerAPI, getShowAPI, getRequestRecordAPI, ispublishAPI, blockAPI } from '../../../api/bys/recruitmentManagement/index';
import { enterpriseAuditExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
export default {
    data() {
        return {
            blacklistOperationVisible: false,
            dialogTableVisible: false,
            loading: false,
            allChecked: false,
            industrySelect: '',
            industrySelection: [], //行业
            natureSelect: '',
            natureSelection: [], //性质
            typeSelection: [], //类型
            scaleSelect: '',
            blacklistForm: {
                isBlocking: true,
                reportReason: '',
                enterpriseId: ''
            },
            recordList: [
                {
                    schoolName: '-',
                    activityType: '-',
                    auditStatus: '-',
                    auditReason: '-',
                    auditTime: '-'
                }
            ],
            scaleSelection: [],
            jobCategorySelect: '',
            jobCategorySelection: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '职位类别',
                    value: '职位类别'
                }
            ],
            modelState: 'all',
            pageTotal: 0,
            pageParams: {
                pageNumber: 1,
                pageSize: 10,
                reviewStatus:'全部',
                unitIndustry: '全部', //所属行业
                unitQuality: '全部', //企业性质
                unitType: '全部', //企业类型
                scale: '全部', //企业规模
                search: '', //搜索框条件
                sort: '', //排序字段
                order: '' //排序方式 asc/desc
            },
            stateSelection: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待审核',
                    value: '待审核'
                },
                {
                    label: '已通过',
                    value: '已通过'
                },
                {
                    label: '已拒绝',
                    value: '已拒绝'
                }
            ],
            modelPosition: '',
            positionSelection: [],
            tableData: [],
            heightNmber:'95%',
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.getList();
        this.getIndustry();
        this.getNature();
        this.getPosition();
        this.getUnitSize();
        this.getflatType();
    },
    methods: {
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
         this.$refs.multipleTable.clearSelection();
        },
        download() {
            enterpriseAuditExportAPI().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '用人单位信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },

        toSearch() {
            this.pageParams.pageNumber=1
            this.getList();
        },
        getList() {
            this.loading = true;
            employerAPI(this.pageParams)
                .then(res => {
                    if (res.success) {
                        this.loading = false;
                        this.tableData = res?.result?.result || [];
                        this.pageTotal = res?.result?.total || 0;
                        console.log(this.tableData);
                    } else {
                        this.loading = false;
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.loading = false;
                });
        },
        //是否拉黑
        isBlocking(id, isBlocking) {
            this.blacklistOperationVisible = true;
            this.blacklistForm.isBlocking = isBlocking;
            this.blacklistForm.enterpriseId = id;
        },
        block() {
            this.blacklistOperationVisible = false;
            blockAPI(this.blacklistForm).then(res => {
                if (res.success) {
                    this.$message.success(res.message);
                    this.getList();
                    this.blacklistOperationVisible = false;
                }
            });
        },
        unmask() {
            this.blacklistOperationVisible = false;
            this.getList();
        },

        // region TODO 职位类别
        getPosition() {
            getnetPositionAPI().then(res => {
                console.log(res, '职位类别');
                this.jobCategorySelection = res.result;
            });
        },
        // endregion

        // region TODO 单位类型
        getflatType() {
            flatTypeAPI().then(res => {
                this.typeSelection = res.result;
            });
        },
        // endregion
        // region TODO 单位规模
        getUnitSize() {
            unitSizeAPI().then(res => {
                this.scaleSelection = res.result;
            });
        },
        // endregion
        // region TODO 单位性质
        getNature() {
            getNatureAPI().then(res => {
                console.log(res, '单位性质');
                this.natureSelection = res.result;
            });
        },
        // endregion
        // region TODO 获取行业类别
        getIndustry() {
            getIndustryAPI().then(res => {
                console.log(res, '行业类别');
                this.industrySelection = res.result;
            });
        },
        // endregion
        // region TODO 查看
        viewDetails(id, schoolId) {
            console.log(id, '查看');
            this.$router.push({ name: 'UnitDetails', query: { id: id, schoolId: schoolId } });
        },
        // endregion
        // region TODO 审核
        audit(id, schoolId) {
            console.log(id, '审核');
            this.$router.push({ name: 'UnitDetails', query: { id: id, schoolId: schoolId } });
        },
        // endregion
        // region TODO 审核记录
        approvedMemo(id) {
            console.log('审核记录');
            getRequestRecordAPI({
                enterpriseId: id
            }).then(res => {
                if (res.success) {
                    console.log(res, '审核记录');
                    this.recordList = res?.result || [];
                    this.dialogTableVisible = true;
                } else {
                    this.recordList = [];
                    this.dialogTableVisible = true;
                }
            });
        },
        // endregion
        isAllChecked(e) {
            if (e) {
                this.$refs.multipleTable.toggleAllSelection();
            } else {
                this.$refs.multipleTable.clearSelection();
            }
            console.log(e, 'eeee');
        },
        handleSlectionChange(selection) {
            this.selectList=selection
            console.log(selection, '选中行的数据');
        },
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getList();
        }
        // endregion
    }
};
</script>
